<!-- 设置页面 -->
<template>
  <div class="settings">
    <!-- 头部导航 -->
    <van-nav-bar
      title="设置"
      left-arrow
      @click-left="onBack"
    />

    <!-- 设置列表 -->
    <div class="settings-list">
      <!-- 账号设置 -->
      <van-cell-group title="账号设置">
        <van-cell title="修改头像" is-link @click="onModifyAvatar" />
        <van-cell title="修改昵称" is-link @click="onModifyUsername" />
        <van-cell title="修改密码" is-link @click="onModifyPassword" />
        <van-cell title="实名认证" is-link @click="onVerification" />
      </van-cell-group>

      <!-- 消息通知 -->
      <van-cell-group title="消息通知">
        <van-cell title="新订单通知">
          <template #right-icon>
            <van-switch v-model="settings.orderNotification" size="24" />
          </template>
        </van-cell>
        <van-cell title="系统消息">
          <template #right-icon>
            <van-switch v-model="settings.systemNotification" size="24" />
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 隐私设置 -->
      <van-cell-group title="隐私设置">
        <van-cell title="位置信息">
          <template #right-icon>
            <van-switch v-model="settings.locationEnabled" size="24" />
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 其他设置 -->
      <van-cell-group title="其他设置">
        <van-cell title="清除缓存" is-link @click="onClearCache" />
        <van-cell title="关于我们" is-link @click="onAbout" />
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn">
      <van-button type="danger" block @click="onLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()

const settings = ref({
  orderNotification: true,
  systemNotification: true,
  locationEnabled: true
})

// 返回上一页
const onBack = () => {
  router.back()
}

// 修改头像
const onModifyAvatar = () => {
  // TODO: 实现头像修改功能
}

// 修改昵称
const onModifyUsername = () => {
  // TODO: 实现昵称修改功能
}

// 修改密码
const onModifyPassword = () => {
  // TODO: 实现密码修改功能
}

// 实名认证
const onVerification = () => {
  router.push('/verification')
}

// 清除缓存
const onClearCache = async () => {
  try {
    await showDialog({
      title: '提示',
      message: '确定要清除缓存吗？',
      showCancelButton: true
    })
    // TODO: 实现清除缓存功能
  } catch {
    // 用户取消操作
  }
}

// 关于我们
const onAbout = () => {
  router.push('/about')
}

// 退出登录
const onLogout = async () => {
  try {
    await showDialog({
      title: '提示',
      message: '确定要退出登录吗？',
      showCancelButton: true
    })
    
    await userStore.logout()
    router.replace('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.settings {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;

  .settings-list {
    margin-top: 12px;
  }

  .logout-btn {
    margin: 20px 16px;
  }
}
</style> 